<template id="Pie">
  <div :id="id"  :style="chartStyle">
      <slot></slot>
  </div>
</template>

<script>
import defaultImange from "../img/bgBlue.png";
export default {
      name: 'ATPie',
      data () {
        return {
          myChart:null,
        }
      },
      mounted(){
        this.$nextTick(function(){
          this.draw();
        })
      },
      watch:{
        seriesData(){
          this.draw()
        }
      },
      props:{
        id:{
          type: String,
          default: function () {
            let temp = [];
            for (let i = 0; i < 6; i++) {
              let randomChar = String.fromCharCode(65 + Math.floor(Math.random() * 19) + i);
              temp.push(randomChar);

            }
            return temp.reduce((pre, next) => pre + next);
          }
        },
        seriesData:{
          type:Array,
          // require:true,
          default:function(){
            return []
          }
        },
        seriesName:{
          type:String,
          // require:false,
          default:'默认文字'
        },
        chartStyle:{
          type:String,
          // require:true,
          default:"width:100%;height:100%;"
        },
        center:{
          type:Array,
          // require:true,
          default:function(){
            return ['50%', '60%']
          }
        },
        fileName: {
          type:String,
          default:"echarts"
        },
        toolboxRight:{
          type:String,
          default:'0px'
        },
        toolboxTop:{
          type:String,
          default:'55px'
        },
        itemColor:{
          type:Array,
          default:function(){
            return ['#5f9dff','#6be1c1','#ffd86e','#ee5959','#7d92d4']
          }
        },
        radius:{
          type:String,
          default:'65%'
        },
        showDownloadIcon:{
          type:Boolean,
          default:true
        },   
        tooltippadding:{
          default:function(){
            return [17,20 ,17 ,22]
          }
        },
        formatter:{
          default:"{b} : {c} ({d}%)"
        }      
      },
      methods: {
        draw(){
            // let myChart = this.$echarts.init(document.getElementById(this.id))
            if (document.getElementById(this.id)) {
              this.myChart = this.myChart==null ? this.$echarts.init(document.getElementById(this.id)):this.myChart
              this.myChart.setOption({
                  color:this.itemColor,
                  tooltip : {
                      padding:this.tooltippadding,
                      trigger: 'item',
                      formatter: this.formatter,
                      backgroundColor:'rgba(50, 50, 50, 0.7)',
                      borderColor:'rgb(51, 51, 51)',
                      borderWidth:0,
                      textStyle:{
                        color:"#fff",
                        fontSize:12,
                        fontFamily: '宋体'
                      }
                  },
                  toolbox:{
                      right:this.toolboxRight,
                      top:this.toolboxTop,
                      show: this.showDownloadIcon,
                      iconStyle: {
                        normal:{
                          borderColor: '#5c6781'
                        },
                        emphasis:{
                          borderColor: '#4990ff'
                        }
                      },
                      orient: 'horizontal',
                      itemGap: 10,
                      itemSize:84,
                      showTitle: true,
                      feature: {
                          saveAsImage:{
                              show:true,
                              name: this.fileName,
                              title: ' ',
                              icon: 'image://'+defaultImange,
                          }    
                      }                      
                  },                         
                  series : [{
                      name: this.seriesName,
                      type: 'pie',
                      radius : '65%',
                      // avoidLabelOverlap: false,
                      center: this.center,
                      selectedMode: 'single',
                      hoverAnimation: false,
                      hoverOffset: 30,
                      label:{
                        normal:{
                          show:true
                        },
                        emphasis:{
                          show:true
                        }
                      },
                      labelLine:{
                          normal:{
                              show:true,
                              lineStyle:{
                                  color:'#b1b1b1'
                              },
                              // length:30,
                              // length2:15
                          },
                          emphasis:{
                              show:true                           
                          }
                      },
                      data:this.seriesData,
                      itemStyle: {
                          emphasis: {
                              // color:this.itemColor,
                              shadowBlur: 0,
                              shadowOffsetX: 0,
                              label: {
                                textStyle: {
                                    fontFamily: '宋体'
                                }
                              }
                          }
                      }
                  }]
              });
              var _this=this
              window.addEventListener("resize",function(){
                  _this.myChart.resize();
              })
            }
        },
      }
    }
</script>

